<template>
    <div>
        <div id="search">
            <Search
                    @setSearchForm="setSearchForm"
            ></Search>
        </div>

        <div id="functional">
            <el-row class="row-bg">
                <el-col :span="14">
                    <el-button
                            icon="el-icon-edit"
                            type="primary"
                            @click="handleAdd"
                    >添加
                    </el-button>
                </el-col>
            </el-row>
        </div>

        <div id="body">
            <el-table
                    :data="tableData"
                    @header-dragend="handleHeaderDragend"
                    border
                    min-height="400"
                    ref="container"
                    style="width: 100%"
            >
                <el-table-column label="省份名称" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.province_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市名称" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.city_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="区县名称" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.district_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="全名" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.fullname }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="编码" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.created_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="210">
                    <template slot="header" slot-scope="scope">
                        <span>操作</span>

                    </template>
                    <template #default="scope">
                        <PersButton
                                type="warning"
                                size="mini"
                                label="修改"
                                @click="handleEdit(scope.row)"
                                perms="LoveLetter:village:button:edit"
                        ></PersButton>
                        <PersButton
                                type="danger"
                                size="mini"
                                label="删除"
                                @click="handleDel(scope.row)"
                                perms="LoveLetter:village:button:del"
                        ></PersButton>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div id="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="['10', '20', '50', '100']"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
            >
            </el-pagination>
        </div>

        <div class="block">
            <el-dialog v-dialogDrag :visible.sync="dialogOpen" width="70%" append-to-body
                       :title="dialogStatus === 'create' ? '新增' : '修改'">
                <create
                        v-if="dialogOpen"
                        @childByDialogVisible="childByDialogVisible"
                        :dialogStatus="dialogStatus"
                        :rowData="dataParameter"
                ></create>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    let PAGE_TYPE_NAME = "village";
    import {
        getInstitutionsListAll,
        getList,
        postSave,
        getlocking,
        taskDelete,
        gettask,
        getVillage
    } from "@/api/village/village";
    import PersButton from "@/components/PersButton.vue";
    import {fieldList, fieldUpdate, fieldUpdateWidth} from "@/api/field/field";
    import Create from "./create";
    import Search from "./search";

    export default {
        components: {PersButton, Search, Create},
        data() {
            return {
                dialogOpen: false,
                dialogStatus: 'create',
                dataParameter: {},
                field_data: [],
                searchForm: {
                    province_id: "",
                    city_id: "",
                    district_id: "",
                    village_id: "",
                },
                tableData: [],
                pageSize: 10, //一页显示多少条
                total: 0,
                pageNumber: 1,
            };
        },
        created() {
        },
        activated() {
            this.init();
        },
        mounted() {
        },
        methods: {
            init() {
                this.getTasklist();
            },
            setSearchForm(searchForm){
                this.searchForm = searchForm;
                this.pageNumber = 1;
                this.pageSize = 10;
                this.getTasklist();
            },
            //---------------------field start ---------------------------
            //获取字段列表
            getFieldList() {
                fieldList({action_name: PAGE_TYPE_NAME})
                    .then(result => {
                        this.field_data = result.data;
                    })
                    .catch(err => {
                        console.log("err", err);
                    });
            },
            // 当拖动表头改变了列的宽度的时候会触发该事件
            handleHeaderDragend(newWidth, oldWidth, column, event) {
                if (column.property) {
                    const params = {
                        action_name: PAGE_TYPE_NAME,
                        field_name: column.property,
                        width: newWidth
                    };

                    fieldUpdateWidth(params)
                        .then(result => {
                            this.getFieldList();
                        })
                        .catch(err => {
                            console.log("err", err);
                        });
                }
            },
            getTasklist() {
                let param = {
                    pageSize: this.pageSize,
                    page: this.pageNumber,
                    province_id: this.searchForm.province_id,
                    city_id: this.searchForm.city_id,
                    district_id: this.searchForm.district_id,
                    pid: this.searchForm.village_id
                };
                getList(param)
                    .then(result => {
                        this.tableData = result.data.data;
                        this.total = result.data.total;
                    })
                    .catch(err => {
                        console.log("err", err);
                    });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getTasklist();
            },
            handleCurrentChange(val) {
                this.pageNumber = val;
                this.getTasklist();
            },
            //添加
            handleAdd() {
                this.dialogOpen = true
                this.dialogStatus = 'create'
            },
            //修改
            handleEdit(row) {
                this.dialogOpen = true
                this.dialogStatus = 'update'
                this.dataParameter = row;
            },
            //删除
            handleDel(data) {
                this.$confirm('确定删除【' + data.name + '】', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    taskDelete(data).then((res) => {
                        if (res.code === 200) {
                            this.msgSuccess(res.msg);
                            this.getTasklist();
                        } else {
                            this.msgError(res.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //对话框点击确定后的回调事件
            childByDialogVisible(childValue, isUpdate) {
                this.dialogOpen = childValue
                this.dataParameter = ""
                if (isUpdate) {
                    this.init()
                }
            },
        }
    };
</script>

<style scoped>
    .is_show {
        color: red;
    }

    .is_show_n {
        color: rgb(17, 226, 63);
    }

    #search,
    #body,
    #functional,
    #page {
        padding-top: 20px;
    }

    .el-dialog__footer {
        text-align: center;
    }
</style>
